<template>
  <div id="pieId1"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      option:null,
      seriesData:[]
    };
  },
  props: {
    chartData: Array,
  },
  watch: {
    chartData: {
      handler(newVal) {
        console.log(newVal,'数据更新dui');
        this.initStr();
      },
      deep: true
    },
  },
  mounted() {
    this.initStr();
  },
  methods: {
    initStr() {
      this.option = {
        color: ['#7CA870', '#FFC53A', '#F5936F', '#F56C6C'],
        title: {
          // text: '车辆类型数量对比图',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          // orient: 'vertical',
          left: 'center'
        },
        series: [
          {
            // name: '车辆类型数量图',
            type: 'pie',
            radius: '50%',
            data: this.chartData,
            label: {
              normal: {
                formatter: function (data) {
                  return data.percent.toFixed(0) + "% " + "\n " + data.name;
                },
                textAlign: 'center'
              }
              // formatter: '{d}%\n{b}'

            },
           
          }
        ]
      };
      this.initBar(this.option);
    },
    initBar() {
      var element = document.getElementById('pieId1');
            if (element) {
                let id = echarts.init(element);
                id.setOption(this.option);
                window.addEventListener("resize", id.resize);
            }

    
    }
  }
};
</script>

<style>
#pieId1 {
  height: 600px;
}
</style>